<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :style="modalStyle">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
<!--      <a-row :gutter="24">-->
<!--        <a-col :sm="24" :style="{ paddingRight: '0px',marginBottom: '12px' }">-->
<!--          <line-chart-multid :title="data.name" :height="'300'" :yaxisText="'金额'" :dataSource="this.dataSource"></line-chart-multid>-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--      <h2>采购清单</h2>-->
      <a-row :gutter="24">
        <a-col :sm="24">
          <a-table :dataSource="this.logs" :columns="columns" :loading="loading" />
        </a-col>
      </a-row>
    </a-spin>
  </j-modal>
</template>
<script>
  import JDate from '@/components/jeecg/JDate'
  import Vue from 'vue'
  import Bar from '@comp/chart/Bar.vue'
  import { DataSet } from '@antv/data-set'
  import { financeMaterialDetails } from '@api/api'
  import LineChartMultid from '@comp/chart/LineChartMultid.vue'

  export default {
    name: "FinanceMaterialDetailsModal",
    components: {
      LineChartMultid,
      Bar,
      JDate,
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes,
      }
    },

    data () {
      return {
        title:"",
        data:{},
        width: '1300px',
        visible: false,
        modalStyle: '',
        confirmLoading: false,
        loading: false,
        dataSource:[],
        purchaseHistoryList:[],
        scale: [{
          dataKey: 'x',
          min: 0,
          max: 1
        }],
        style: { stroke: '#fff', lineWidth: 1 },
        columns: [
          { title: "时间",dataIndex: "logTime"},
          { title: "类型",dataIndex: "logType"},
          { title: "日志内容",dataIndex: "logContent"}
        ],
      }
    },
    computed: {
      data() {
        logs: []
      }
    },
    created () {
      let realScreenWidth = window.screen.width
      this.width = realScreenWidth<1500?'1200px':'1400px'
    },
    methods: {
      edit (record) {
        console.log(record);
        this.data = record;
        this.visible = true
        this.modalStyle = 'top:20px;height: 95%;'
        let params={
          materialId: record.material.id
          // materialId: 754
        }
        this.loading = true;
        financeMaterialDetails(params).then((res)=>{
          if(res){
            console.log(res);
            this.logs = res.data.logs;
            // this.title = '材料库存流水_'+res.data.material.name;
            // this.purchaseHistoryList = res.data.data;
            // for (let i = 0; i < this.purchaseHistoryList.length; i++) {
            //   this.dataSource.push(
            //     { type: this.purchaseHistoryList[i].create_time,
            //       purchase_decimal: this.purchaseHistoryList[i]. purchase_decimal,
            //       wholesale_decimal: this.purchaseHistoryList[i]. wholesale_decimal,
            //       low_decimal: this.purchaseHistoryList[i]. low_decimal
            //     }
            //   )
            // }
            
          }
          this.loading = false;
        })

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>
<style scoped>
</style>